<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 351px;
            height: 250px;
            background: url("../img/ccc.png");
            position: absolute;
            border: 1px solid black;
            left: 0;
            top: 0;
            float: left;
            display: none;
        }
        #dd{
            cursor: pointer;
            position: absolute;
        }
        .da{
            width: 100%;
            height: 1000px;

        }
    </style>
</head>
<body>
<input type="button" value="登录" id="dd">
<div class="da">
    <div id="box">
    </div>
</body>
</html>
    <script src="js/jquery-1.10.1.js"></script>
    <script>
        $(function () {
            $("#dd").click(function () {
                $("#box").show(function () {
                    $(".da").css({
                        background:"#ccc"
                    })
                });
                $("#box").click(function () {
                    $(".da,#box").hide();
                })
            })

            $("#box").bind("mousedown",function (e) {
                var disX = e.clientX - $(this).offset().left;
                var disY = e.clientY - $(this).offset().top;
                $(document).bind("mousemove",function (e) {
                    var l = e.clientX - disX;
                    var t = e.clientY - disY;
                    if(l < 0){
                        l = 0;
                    }
                    if(l > $(window).width() - $("#box").outerWidth()){
                        l = $(window).width() - $("#box").outerWidth();
                    }
                    if(t > $(window).height() - $("#box").outerHeight()){
                        t = $(window).height() - $("#box").outerHeight()
                    }
                    if(t < 0){
                        t = 0;
                    }
                    $("#box").css({
                        left : l,
                        top : t
                    })
                })
                $(document).bind("mouseup",function () {
                    $(document).unbind("mousemove");
                    $(document).unbind("mouseup");
                })

                return false;
            })

        })
    </script>